<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>消息</title>
<link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
.aui-content{
	padding: 0rem 0.9rem 0rem 1rem;
}
/*修改aui默认样式*/
.aui-tab{
	box-shadow: 0px 4px 8px 0px #E7E7E7;
	-moz-box-shadow: 4px 0px 8px 0px #E7E7E7;/* 老的 Firefox */
}
.aui-tab .aui-tab-item {
	font-size: 0.7rem;
	height: 2.2rem;
	line-height: 2.2rem;
	position: relative;
}
.aui-tab .aui-tab-item.aui-active {
	color: #333333;
	border: none;
	font-weight: bold;
}
.aui-tab .aui-tab-item.aui-active:before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	background: #E63350;
	height: 0.1rem;
	width: 70%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.aui-dot {
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    background: #E63350;
    border-radius: 0.5rem;
    position: absolute;
    top: 0.5rem;
    right: 8%;
    z-index: 99;
}
.newItem{
	padding: 1rem 0 0.85rem;
}
.head-img{
	padding-right: 0.4rem;
}
.head-img img{
	height: 1.8rem;
	width: 1.8rem;
	border-radius: 50%;
}
.info{
	flex: 1
}
.info .tit{
	font-size:0.7rem;
	color: #010101;
	line-height: 0.6rem;
	padding:0.1rem 0 0.4rem;
}
.info .infoCon{
	color: #555555;
	font-size:0.6rem;
	line-height: 0.8rem;
}
.info .time{
	color:#ACACAD;
	font-size:0.5rem;
	line-height: 10px;
}
.aui-pt-4{
	padding-top: 0.4rem;
}
.aui-pl-4{
	padding-left: 0.4rem;

}
.photo{
	width: 1.6rem;
	height: 1.6rem;
}
.photo img{
	width: 1.6rem;
	height: 1.6rem;
}
.color-555{
color: #555555;
}
.evaCon{
	background: #EEEEEE;
	border-radius: 2px;
	padding: 0.2rem 0.5rem;
	margin-top:0.5rem;
	border-radius: 2px;
	display: inline-block;
}
.follow{
	width: 2.4rem;
	height: 1.2rem;
	line-height: 1.1rem;
	font-size:0.6rem;
	text-align: center;
	color: #F94E6F;
	border: 1px solid #F94E6F;
	border-radius: 2.5rem;
}
.dis{
	opacity: 0.6;
border: 1px solid #ADADAD;
color: #adadad;
}
</style>
</head>
<body>
	<div id="top">
		<div class="aui-tab topFix" id="type-tab">
				<div class="aui-tab-item aui-active" tapmode onClick="openNews(0);">公告消息<span id="gong"></span></div>
				<div class="aui-tab-item" tapmode onClick="openNews(1);">团队通知<span id="team"></span></div>
				<div class="aui-tab-item" tapmode onClick="openNews(2);">订单通知<span id="order"></span></div>
				<div class="aui-tab-item" tapmode onClick="openNews(3);">互动消息<span id="hudong"></span></div>
		</div>
		<div style="height: 2.2rem;box-sizing: content-box;"></div>
	</div>
	<div class="aui-content">
		<div class="item-tab aui-padded-t-10" id="data_html">
			
			</div>
		</div>

		<!-- 公告消息 -->
		<script type="text/x-dot-template" id="data_tpl">
    {{ for(var i in it){ }}
				<div class="aui-flex-col newItem aui-border-b" data-id="{{=it[i].msg_id}}" tapmode onclick="openWin()"  data-name="团队通知/订单通知">
						<div class="head-img"><img src="{{= it[i].user_avatar}}" alt=""></div>
						<div class="info">
							<div class="tit" id="txt">{{= it[i].msg_title || ''}}</div>
							<div class="infoCon aui-ellipsis">{{= it[i].msg_content || ''}}</div>
							<p class="time aui-pt-4">{{= it[i].msg_addtime || ''}}</p>
						</div>
				</div>
		{{ } }}
    </script>
		<script type="text/x-dot-template" id="data_order_tpl">
		{{ for(var i in it){ }}
				<div class="aui-flex-col newItem aui-border-b" data-id="{{=it[i].msg_id}}" tapmode onclick="openWin()"  data-name="订单通知">
						<div class="head-img"><img src="{{= it[i].user_avatar}}" alt=""></div>
						<div class="info">
							{{if(it[i].msg_type == 1){}}
								<div class="tit" id="txt">个人订单</div>
							{{}else if(it[i].msg_type == 2){}}
								<div class="tit" id="txt">团队订单</div>
								{{}else if(it[i].msg_type == 3){}}
								<div class="tit" id="txt">团队订单</div>
							{{}}}
							<div class="infoCon aui-ellipsis">{{= it[i].msg_content || ''}}</div>
							<p class="time aui-pt-4">{{= it[i].msg_addtime || ''}}</p>
						</div>
				</div>
		{{ } }}
		</script>
		<script type="text/x-dot-template" id="data_interact_tpl">
		{{ for(var i in it){ }}
		{{if(it[i].msg_type == 1) {}}
		<div class="aui-flex-col aui-flex-middle newItem aui-border-b" data-msgType="{{=it[i].msg_type}}" data-id="{{=it[i].msg_id}}"   data-userid="{{=it[i].userid}}"  {{if(it[i].msg_type != 3) {}}data-valid = "{{=it[i].article.article_valid}}" {{}}} data-artid="{{=it[i].article.article_id}}" tapmode onclick="openPostDetail({{=it[i].article.article_id}},this)">
		{{}else{}}
			<div class="aui-flex-col aui-flex-middle newItem aui-border-b" data-msgType="{{=it[i].msg_type}}" data-id="{{=it[i].msg_id}}"  data-userid="{{=it[i].userid}}"  {{if(it[i].msg_type != 3) {}}data-valid = "{{=it[i].article.article_valid}}" {{}}} tapmode onclick="openPost(this)">
			{{}}}
				<div class="head-img"><img src="{{= it[i].user_avatar}}" alt=""></div>
				<div class="info">
					<div class="tit aui-font-size-12">{{=it[i].user_nickname}}<span class="color-555 aui-font-size-12 aui-pl-4">{{=it[i].msg_content}}</span></div>
					<p class="time">{{= it[i].msg_addtime || ''}}</p>
					{{if(it[i].msg_type == 2) {}}
					{{if(it[i].article) {}}
						<div class="evaCon aui-font-size-10 color-555">{{=it[i].article.comment_content}}</div>
						{{}}}
					{{}}}
				</div>
				{{if(it[i].msg_type == 3) {}}
				{{if(it[i].is_concerned == 1) {}}
					<div class="follow dis">已关注</div>
					{{}else {}}
					<div class="follow">关注</div>
					{{}}}
				{{}else {}}
				{{if(it[i].article) {}}
				<div class="photo" data-artId="{{=it[i].article.article_id}}"><img src="{{=it[i].article.article_cover}}" alt=""></div>
				{{}}}
			{{}}}
		</div>
		{{}}}
		</script>
		<script type="text/x-dot-template" id="data_no">
				<div class="notData aui-flex-row aui-flex-middle" style="left:0;min-height:85%">
		            <img src="../image/notdata/09.png">
		            <div>还没有内容哟</div>
		        </div>
		</script>
		<!-- 团队通知 -->
		<!-- <div class="item-tab">
			<div class="aui-flex-col newItem aui-border-b">
					<div class="head-img"><img src="" alt=""></div>
					<div class="info">
						<div class="tit">团队成员升级</div>
						<div class="infoCon aui-ellipsis">恭喜“奔走的鹿”已成功加入您的团队~</div>
						<p class="time aui-pt-4">2018/8/12 <span>09:12</span></p>
					</div>
			</div>
		</div> -->
		<!-- 订单通知 -->
		<!-- <div class="item-tab">
			<div class="aui-flex-col newItem aui-border-b">
					<div class="head-img"><img src="" alt=""></div>
					<div class="info">
						<div class="tit">个人订单</div>
						<div class="infoCon aui-ellipsis-2">您有一笔新的订单，请注意查看</div>
						<p class="time aui-pt-4">2018/8/12 <span>09:12</span></p>
					</div>
			</div>
			<div class="aui-flex-col newItem aui-border-b">
					<div class="head-img"><img src="" alt=""></div>
					<div class="info">
						<div class="tit">团队订单</div>
						<div class="infoCon aui-ellipsis-2">新团队订单！新团队订单！新团队订单！新团队订单！新团队订单！新团队订单！您赚到0.3元！订单来自团队成员：LULU茜茜小主</div>
						<p class="time aui-pt-4">2018/8/12 <span>09:12</span></p>
					</div>
			</div> -->

		<!-- </div> -->
		<!-- 互动消息 -->
		<!-- <div class="item-tab">
			<div class="aui-flex-col newItem aui-border-b" data-name="互动点赞" tapmode onclick="openPost()">
					<div class="head-img"><img src="../image/demo/01.png" alt=""></div>
					<div class="info">
						<div class="tit aui-font-size-12">奔走的鹿<span class="color-555 aui-font-size-12 aui-pl-4">赞了您的笔记</span></div>
						<p class="time">5分钟前</p>
					</div>
					<div class="photo"><img src="../image/demo/02.jpg" alt=""></div>
			</div>
			<div class="aui-flex-col newItem aui-border-b" data-name="互动评论" tapmode onclick="">
					<div class="head-img"><img src="../image/demo/01.png" alt=""></div>
					<div class="info">
						<div class="tit aui-font-size-12">奔走的鹿<span class="color-555 aui-font-size-12 aui-pl-4">评论您的笔记</span></div>
						<p class="time">2018/8/12 <span>09:12</span></p>
						<div class="evaCon aui-font-size-10 color-555">来而不往非礼也</div>
					</div>
					<div class="photo"><img src="../image/demo/02.jpg" alt=""></div>
			</div> -->
			<!-- 关注的 -->
			<!-- <div class="aui-flex-col newItem aui-border-b" data-name="互动关注"  tapmode onclick="openFans()">
					<div class="head-img"><img src="../image/demo/01.png" alt=""></div>
					<div class="info">
						<div class="tit aui-font-size-12">奔走的鹿<span class="color-555 aui-font-size-12 aui-pl-4">开始关注您了</span></div>
						<p class="time">昨天<span>09 : 12</span></p>
					</div>
					<div class="follow">关注</div>
			</div> -->
			<!-- 打赏的 -->
			<!-- <div class="aui-flex-col newItem aui-border-b" data-name="互动打赏" tapmode onclick="openDa()">
					<div class="head-img"><img src="../image/demo/01.png" alt=""></div>
					<div class="info">
						<div class="tit aui-font-size-12">奔走的鹿<span class="color-555 aui-font-size-12 aui-pl-4">打赏了您2枚积分</span></div>
						<p class="time">2018/8/12</p>
					</div>
					<div class="photo"><img src="../image/demo/02.jpg" alt=""></div>
			</div> -->
		</div>

	</div>
</body>
<script type="text/javascript" src="../script/import.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
var currentPage = 1;
var pageSize = 50;
var num = 0
var huFlag = true;
var isLoading = false;
apiready = function(){
	api.parseTapmode();
	$$('#top > div').css('padding-top',api.safeArea.top+'px');
	openNews(num)

	//监听到达底部
	api.addEventListener({
	    name:'scrolltobottom',
	    extra:{
	        threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
	    }
	}, function(ret, err){
			if(huFlag){
				openNews(num)
			}
	});
	getunReadMsg()
	api.addEventListener({
	    name: 'myEvent'
	}, function(ret, err){
	    if( ret ){
				log('6666')
				getunReadMsg()

	    }else{
	         alert( JSON.stringify( err ) );
	    }
	});

};

function getunReadMsg(){
	log('刚打开')
	// 消息提醒
	api.ajax({
			url: BASE_URL + 'App/Notice/unReadMsg',
			method: 'post',
			data: {
					values:{
						userid: getUserId()
					}
			}
	},function(ret,err){
		if(ret.noticeCount > 0){
			$$('#gong').addClass('aui-dot')
		}else{
			$$('#gong').removeClass('aui-dot')
		}
		if(ret.teamMsgCount > 0){
			$$('#team').addClass('aui-dot')
		}else{
			$$('#team').removeClass('aui-dot')
		}
		if(ret.orderMsgCount > 0){
			$$('#order').addClass('aui-dot')
		}else{
			$$('#order').removeClass('aui-dot')
		}
		if(ret.interactMsgCount > 0){
			// console.log(ret.interactMsgCount)
			$$('#hudong').addClass('aui-dot')
		}else{
			$$('#hudong').removeClass('aui-dot')

		}
	});
}
function openNews(ind) {
	$$('#type-tab > div').removeClass('aui-active').eq(ind).addClass('aui-active');
	//当前页面发生改变，刷新currentPage
	if( num != ind){
			num = ind
			currentPage = 1
	}
// 公告消息
	if(ind === 0){
		isLoading = true;
		showProgress()
		api.ajax({
        url: BASE_URL + 'App/Notice/notice',
        method: 'post',
        data: {
						values:{
							userid: getUserId(),
							pageNo: currentPage,
							pageSize: pageSize
						}
        }
    },function(ret,err){
			// console.log(JSON.stringify(ret))
        if(ret){
					if (ret.data && ret.data.length > 0) {
							var tpl = $$('#data_tpl').html();
							currentPage++;
							if(ret.data.length < pageSize){
									huFlag = false;
							}
	        }else {
						var tpl = $$('#data_no').html();
						huFlag = false;
	        }
					var tempFn = doT.template(tpl);
					console.log(tempFn(ret.data));
					$$('#data_html').html(tempFn(ret.data));
					$$('#aa').html(tempFn(ret.data));
					$$('.newItem').on('click',function(){
						var msgId = $$(this).data('id');
						api.ajax({
									url: BASE_URL + 'App/Notice/readNotice',
									method: 'post',
									data: {
											values:{
												user_type: getUserinfo().user_vip,
												msg_id: msgId
											}
									}
							},function(ret,err){
									getunReadMsg()
							});
					})
				}
					api.parseTapmode();
					isLoading = false;
	        hideProgress()
    });
	}
	// 团队消息
	if(ind === 1){
		isLoading = true;
		showProgress()
		api.ajax({
				url: BASE_URL + 'App/Notice/teamMsg',
				method: 'post',
				data: {
						values:{
							userid: getUserId(),
							pageNo: currentPage,
							pageSize: pageSize
						}
				}
		},function(ret,err){
				if (ret.data && ret.data.length > 0) {
					var tpl = $$('#data_tpl').html();
					currentPage++;
					if(ret.data.length < pageSize){
						huFlag = false;
					}
				}else {
					var tpl = $$('#data_no').html();
					huFlag = false;
				}
				var tempFn = doT.template(tpl);
				$$('#data_html').html(tempFn(ret.data));
				$$('.newItem').on('click',function(){
					var msgId = $$(this).data('id');
					api.ajax({
								url: BASE_URL + 'App/Notice/readTeamMsg',
								method: 'post',
								data: {
										values:{
											userid: getUserId(),
											msg_id: msgId
										}
								}
						},function(ret,err){
								getunReadMsg()
						});
				})
				api.parseTapmode();
				isLoading = false;
				hideProgress()
		});
	}
	// 订单消息
	if(ind == 2){
		isLoading = true;
		showProgress();
		api.ajax({
        url: BASE_URL + 'App/Notice/orderMsg',
        method: 'post',
        data: {
						values:{
							userid: getUserId(),
							pageNo: currentPage,
							pageSize: pageSize
						}
        }
    },function(ret,err){
        if(ret){
					if (ret.data && ret.data.length > 0) {
						var tpl = $$('#data_order_tpl').html();
						currentPage++;
						api.parseTapmode();
						if(ret.data.length < pageSize){
							huFlag = false;
						}
	        }else {
						var tpl = $$('#data_no').html();
						huFlag = false;
	        }
					var tempFn = doT.template(tpl);
					$$('#data_html').html(tempFn(ret.data));
					$$('.newItem').on('click',function(){
						var msgId = $$(this).data('id');
						// console.log(msgId)
						api.ajax({
									url: BASE_URL + 'App/Notice/readOrderMsg',
									method: 'post',
									data: {
											values:{
												userid: getUserId(),
												msg_id: msgId
											}
									}
							},function(ret,err){
									getunReadMsg()
							});
					})
				}
				api.parseTapmode();
				isLoading = false;
        hideProgress()
    });
	}
	// 互动消息
	if(ind == 3){
		isLoading = true;
		showProgress()
		api.ajax({
				url: BASE_URL + 'App/Notice/interactMsg',
				method: 'post',
				data: {
						values:{
							userid: getUserId()
						}
				}
		},function(ret,err){
			// console.log(JSON.stringify(ret))
			if (ret.data && ret.data.length > 0) {
				var tpl = $$('#data_interact_tpl').html();
				currentPage++;
				if(ret.data.length < pageSize){
					huFlag = false;
				}
			}else {
				var tpl = $$('#data_no').html();
				huFlag = false;
			}
			var tempFn = doT.template(tpl);
			$$('#data_html').html(tempFn(ret.data));
			$$('.newItem').on('click',function(){
				var msgId = $$(this).data('id');
				// console.log(msgId)
				api.ajax({
							url: BASE_URL + 'App/Notice/readInteractMsg',
							method: 'post',
							data: {
									values:{
										userid: getUserId(),
										msg_id: msgId
									}
							}
					},function(ret,err){
							getunReadMsg()
					});
			})
				api.parseTapmode();
				isLoading = false;
				hideProgress()
		});
	}
}
//打开专题
function openSubject(){
	api.openWin({
		name: 'subject_win',
		url: 'best/subject_win.html',
		bounces: false,
		pageParam: {
			key : 'value'
		}
	});
}
//打开全部奖励
function openFull(){
	api.openWin({
		name: 'full_commission_win',
		url: 'mine/full_commission_win.html',
		bounces: false,
		pageParam: {
			key : 'value'
		}
	});
}
//打开文章详情
function openPostDetail(n,el){
	// console.log(el)
	var del = $$(el).data('valid');
	// console.log(del)
	if(del == -1){
		return toast('文章已被删除')
	}
	api.openWin({
		name: 'post_detail_win',
		url: 'post/post_detail_win.html',
		reload: true,
		pageParam: {
			id: n
		}
	});
}
//打开点赞文章详情
function openPost(el){
	var _this = $$(el);
	var type = _this.data('msgType');
	var id = _this.data('userid');
	// var del = _this.data('valid');
	// if(del == -1){
	// 	return '文章已被删除'
	// }
	if(type == 3){
		api.openWin({
			name: 'article_win',
			url: 'center/article_win.html',
			bounces: false,
			pageParam: {
				itemId : id
			}
		});
	}
	if(type == 3){
		api.openWin({
			name: 'article_win',
			url: 'center/article_win.html',
			bounces: false,
			pageParam: {
				itemId : id
			}
		});
	}
	if(type == 4){
		api.openWin({
			name: 'trading_flow_win',
			url: 'mine/trading_flow_win.html',
			bounces: false,
			pageParam: {
				itemId : id
			}
		});
	}

}
//打开评论详情
function openEva(){
	api.openWin({
		name: '',
		url: '',
		bounces: false,
		pageParam: {
			key : 'value'
		}
	});
}
//打开我的粉丝
function openFans(){
	api.openWin({
		name: 'fans_win',
		url: 'center/fans_win.html',
		bounces: false,
		pageParam: {
			fans : 'fans'
		}
	});
}
//打开积分流水
function openDa(){
	api.openWin({
		name: 'trading_flow_win',
		url: 'mine/trading_flow_win.html',
		bounces: false,
		pageParam: {
			key : 'value'
		}
	});
}
</script>
</html>
